<!DOCTYPE html>
<html lang='en' xmlns:th='http://www.thymeleaf.org'>
<head>
	<meta charset='UTF-8'>
	<title>分类添加</title>
	<link rel='stylesheet' href='../../static/css/style.css' th:href='@{http://localhost:8080/css/style.css}'>

	<link rel='stylesheet' href='../../static/css/man/brand.css'
		  th:href='@{http://localhost:8080/css/man/brand.css}'>

	<link rel='stylesheet' href='../../static/layui/css/layui.css'
		  th:href='@{http://localhost:8080/layui/css/layui.css}'>
	<script src='../../static/layui/layui.js' th:src='@{http://localhost:8080/layui/layui.js}'></script>
	<script src='../../static/js/jquery.js'
			th:src='@{http://localhost:8080/webjars/jquery/3.6.0/jquery.min.js}'></script>

	<script src='../../static/js/man/brand.js' th:src='@{http://localhost:8080/js/man/brand.js}'></script>
</head>
<body>
	<ul id='brand_list' class='layui-nav layui-bg-cyan layui-container'>
		<li class='layui-nav-item '><a href='javascript:;' id='brand' >品牌分类</a></li>
		<li class='layui-nav-item '><a href='javascript:;' id='variety'>品种类</a></li>
		<li class='layui-nav-item layui-this'><a href='javascript:;' id="type">型号分类</a></li>
	</ul>

	<div id='brand_div' class="layui-hide" >
		<div id='brand_add' class='layui-container'>
			<fieldset class='layui-elem-field layui-btn-fluid' >
				<legend>添加新品牌</legend>
				<div class='layui-field-box'>
					<form action='/brand/add'>
						<input id='brand_add_ipt' type='text' name='name' style="width: 500px;" class='layui-input-inline' placeholder='请添加新的品牌' >
						<input id='brand_add_sub' type='submit' value='添加' class='layui-input-inline layui-btn-normal'>
					</form>
				</div>
			</fieldset>

		</div>
		<h1>品牌分类表</h1>
		<div class='layui-form-item'>
			<label class='layui-form-label ' style='width: 200px' >请输入需要搜索的内容</label>
			<div class='layui-input-block'>
				<input  id='search_ipt' type='text' style='width: 400px;' name='search' lay-verify='title' autocomplete='off' placeholder='不填写内容即搜索全部' class='layui-input'>
				<button id='search_btn' type='button' class='layui-btn layui-btn-normal layui-btn-radius'>搜索</button>
			</div>
		</div>

		<!--定义table ID -->
		<table id='brand_table' class='layui-table' lay-filter='brand'></table>

		<script type='text/html' id='bar'>
			<a style='width:160px;' class=' layui-btn-danger layui-btn-xs layui-btn layui-btn-normal layui-btn-radius'
			   lay-event='del' >删除</a>
		</script>

	</div>

	<div id='variety_div' class='layui-hide' >
		<div id='variety_add' class='layui-container'>
			<!--新品种添加-->
			<fieldset class='layui-elem-field '>
				<legend>请点击品牌后添加新品种</legend>
				<div class='layui-field-box' >
						<div class='layui-tab layui-tab-card ' style='width:auto;  margin:0 auto;' >
							<ul class='layui-tab-title' id='brand_list2'>
								<!--/*-->
								<li class='layui-this' value='1'>品牌1</li>
								<li value='2'>品牌2</li>
								<li value='3'>品牌3</li>
								<li value='4'>品牌4</li>
								<li value='5'>品牌5</li>
								<li value='6'>品牌6</li>
								<li value='7'>品牌7</li>
								<li value='8'>品牌8</li>
								<li value='9'>品牌9</li>
								<li value='10'>品牌10</li>
								<!--*/-->
							</ul>
							<div class='layui-tab-content' style='height: 100px;' id='brand_list2_content'>
								<div class='layui-tab-item'>
									<form action='/variety/add' class='layui-container' style='margin-top: 30px; ' >
										<input type='hidden' name='brandId' value='${variety.id}'>
										<input class='variety_add_ipt layui-input-inline' type='text' style="width: 500px;" name='name'  placeholder='请添加新的品种' >
										<input class='variety_add_sub layui-input-inline layui-btn-normal' type='submit' value='添加'>
									</form>
								</div>
							</div>
						</div>
				</div>
			</fieldset>
		</div>
		<h1>品种分类</h1>
		<div class='layui-form-item' >
			<div class='layui-inline'>
				<div class='layui-input-inline'>
					<select id='variety_choose' name='modules' lay-verify='required' lay-search=''>
						<option value='0'>请输选择品牌</option>
						<!--/*-->
						<option value='1'>layer</option>
						<option value='2'>form</option>
						<option value='3'>layim</option>
						<option value='4'>element</option>
						<!--*/-->
					</select>
				</div>
			</div>
		</div>

		<!--定义table ID -->
		<table id='variety_table' class='layui-table' lay-filter='variety_table_brand'></table>

		<script type='text/html' id='variety_bar'>
			<a style='width:160px;' class=' layui-btn-danger layui-btn-xs layui-btn layui-btn-normal layui-btn-radius'
			   lay-event='del' >删除</a>
		</script>

	</div>

	<div id="type_div" >
		<h1>型号分类表</h1>
		<div class="layui-form-item " id="type_add" >

			<!--新品种添加-->
			<fieldset class='layui-elem-field' style=" margin:0 0 0 10%;">
				<legend>请选择完后添加新型号</legend>
				<div class="layui-input-inline" id="type_add_brand_div" >
					<select name="quiz1" id="type_add_brand" >
						<option value="0">请选择品牌</option>
						<option value="1" th:each="brand : ${brands}" th:value="${brand.id}" th:text="${brand.name}">1</option>
						<!--/*-->
						<option value="浙江" selected="">浙江省</option>
						<option value="你的工号">江西省</option>
						<option value="你最喜欢的老师">福建省</option>
						<!--*/-->
					</select>
				</div>
				<div class="layui-input-inline" id="type_add_variety_div">
					<select name="quiz2" id="type_add_variety" >
						<option value="0">请选择产品名称</option>
						<!--/*-->
						<option value="杭州">杭州</option>
						<option value="宁波" disabled="">宁波</option>
						<option value="温州">温州</option>
						<option value="温州">台州</option>
						<option value="温州">绍兴</option>
						<!--*/-->
					</select>
				</div>
				<div class="layui-btn-group " id="btn_group">
					<form action="/type/add" id="type_add_form" >
						<!--jquery实现选择 type_add_variety 时,将值赋值给当前隐藏值-->
						<input type="hidden" name="varietyId" value="1">
						<input class="layui-input-inline"  type="text" name="name">
						<input class="layui-input-inline" id="type_add_submit" type="submit" value="添加">
					</form>
				</div>
			</fieldset>


		</div>

		<div class="clear"></div>
		<!--定义table ID -->
		<table id='type_table' class='layui-table' lay-filter='type_brand'></table>

		<script type='text/html' id='type_bar'>
			<a style='width:160px;' class=' layui-btn-danger layui-btn-xs layui-btn layui-btn-normal layui-btn-radius'
			   lay-event='del' >删除</a>
		</script>

		<script>
			var searchName = '';
			var id = 0;

			$(function (){
				searchList(searchName,id);
				$('#search_btn').on('click',function (){
					searchName = $('#search_ipt').val();
					searchList(searchName);
				})
				//获取品牌选择的Value值,并实现后台查询数据.
				$("#variety_choose").on("change",function (){
					console.log("$(this).val()" + $(this).val());
					//通过brand ID 查询对应的数据
					id=$(this).val();
					searchList("",id);
				})

				//通过选择品种,得到品种的ID值,并将ID值赋值给
				$("#type_add_variety").on("change",function (){
					var varietyId = $(this).val();
					console.log(varietyId);
					$("#type_add_form :eq(0)").val(varietyId);
					searchList(searchName,id,varietyId);
				})

			})

			function searchList(searchName,id,variteyId){
				layui.use('table', function(){
					var table = layui.table;

					table.render({
						elem: '#brand_table',
						url: '/brand/brandList?searchName='+searchName, //数据接口
						page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
							layout: ['prev', 'page', 'next', 'count', 'skip'] //自定义分页布局
							//,curr: 5 //设定初始在第 5 页
							, groups: 5 //只显示 1 个连续页码
							, limit: 10
						},
						cols: [
							[//表头
								{field: 'name', title: '品牌名',edit: 'text', align: 'center'}
								, {title: '操作', toolbar: '#bar' , align:'center'}
							]
						],

					});


					table.render({
						elem: '#variety_table',
						url: '/variety/all?brandId='+id, //数据接口
						page: {
							layout: ['prev', 'page', 'next', 'count', 'skip']
							, groups: 5 //只显示 1 个连续页码
							, limit: 10
						},
						cols: [
							[//表头
								{field: 'brandName', title: '品牌名',sort:true, align: 'center'}
								,{field: 'varietyName', title: '品种名',edit: 'text', sort:true, align: 'center'}
								, {title: '操作', toolbar: '#variety_bar' , align:'center'}
							]
						],

					});

					table.render({
						elem: '#type_table',
						url: '/type/all?id='+variteyId, //数据接口
						page: {
							layout: ['prev', 'page', 'next', 'count', 'skip']
							, groups: 5 //只显示 1 个连续页码
							, limit: 10
						},
						cols: [
							[//表头
								{field: 'name', title: '型号名',edit: 'text', sort:true, align: 'center'}
								, {title: '操作', toolbar: '#variety_bar' , align:'center'}
							]
						],

					});

					//监听单元格编辑
					table.on('edit(type_brand)', function(obj){
						var value = obj.value //得到修改后的值
							,data = obj.data //得到所在行所有键值
							,field = obj.field; //得到字段
						$.ajax({
							url:'/type/update',
							method: 'get',
							data:'name='+value+'&id='+data.id,
							success:function (da){
								layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value+ ' =====  '+ da);
							}
						})
					});

					//监听工具条
					table.on('tool(type_brand)', function (obj) {
						var data = obj.data;
						if (obj.event === 'del') {
							layer.confirm('请确认删除当前品牌.', function (index) {
								console.log(obj.data.id);
								obj.del();
								layer.close(index);
								//后台删除并响应结果
								$.ajax({
									url: '/type/del',
									method: 'post',
									data: 'id=' + obj.data.id,
									success: function (data) {
										//弹出删除成功提示
										if (data == 'success') {
											layui.use('layer', function () {
												var layer = layui.layer;
												layer.msg('品牌删除成功', {
													icon: 1,
													time: 1000,
													anim: 5
												});
											});
											location='/brand/list';
										}
									}
								})
							});
						}
					});


					//监听单元格编辑
					table.on('edit(brand)', function(obj){
						var value = obj.value //得到修改后的值
							,data = obj.data //得到所在行所有键值
							,field = obj.field; //得到字段
						$.ajax({
							url:'/brand/update',
							method: 'get',
							data:'keyStr='+field+'&valueStr='+value+'&id='+data.id,
							success:function (da){
								layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value+ ' =====  '+ da);
							}
						})
					});

					//监听工具条
					table.on('tool(brand)', function (obj) {
						var data = obj.data;
						if (obj.event === 'del') {
							layer.confirm('请确认删除当前品牌.', function (index) {
								console.log(obj.data.id);
								obj.del();
								layer.close(index);
								//后台删除并响应结果
								$.ajax({
									url: '/brand/del',
									method: 'post',
									data: 'id=' + obj.data.id,
									success: function (data) {
										//弹出删除成功提示
										if (data == 'success') {
											layui.use('layer', function () {
												var layer = layui.layer;
												layer.msg('品牌删除成功', {
													icon: 1,
													time: 1000,
													anim: 5
												});
											});
											location='/brand/list';
										}
									}
								})
							});
						}
					});



					//监听单元格编辑
					table.on('edit(variety_table_brand)', function(obj){
						var value = obj.value //得到修改后的值
							,data = obj.data //得到所在行所有键值
							,field = obj.field; //得到字段
						$.ajax({
							url:'/variety/update',
							method: 'get',
							data:'name='+value+'&id='+data.id,
							success:function (da){
								layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value+ ' =====  '+ da);
							}
						})
					});

					//监听工具条
					table.on('tool(variety_table_brand)', function (obj) {
						var data = obj.data;
						if (obj.event === 'del') {
							layer.confirm('请确认删除当前品牌.', function (index) {
								console.log(obj.data.id);
								obj.del();
								layer.close(index);
								//后台删除并响应结果
								$.ajax({
									url: '/variety/del',
									method: 'post',
									data: 'id=' + obj.data.id,
									success: function (data) {
										//弹出删除成功提示
										if (data == 'success') {
											layui.use('layer', function () {
												var layer = layui.layer;
												layer.msg('品牌删除成功', {
													icon: 1,
													time: 1000,
													anim: 5
												});
											});
											location='/brand/list';
										}
									}
								})
							});
						}
					});
				});
			}



		</script>
	</div>


	<script>
		//注意：导航 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
			var element = layui.element;
			//一些事件触发
			element.on('tab(demo)', function(data){
				console.log(data);
			});
			//…
		});
	</script>

</body>
</html>